<template>
  <div class="bj" style="margin: 0; padding: 0; width: 1920px; height: 1080px">
    <div style="width: 100%; height: 120px">
      <div class="biaoti">
        甘肃省中医院北区扩建项目中医药传承创新中心项目、中医康复中心项目基坑监测工程
      </div>
      <div
        style="
          width: 130px;
          height: 30px;
          position: relative;
          bottom: 20px;
          left: 150px;
          color: #00ffff;
          text-align: center;
          font-size: 16px;
        "
      >
        {{ currentTime }}
      </div>
      <div
        style="
          width: 50px;
          height: 30px;
          position: relative;
          left: 1750px;
          top: -45px;
        "
      >
        <el-button type="primary" @click="centerDialogVisible = true">
          新增
        </el-button>
      </div>
      <div
        style="
          width: 50px;
          height: 30px;
          position: relative;
          left: 1830px;
          top: -75px;
        "
      >
        <el-button type="primary" @click="bianji = true"> 编辑 </el-button>
      </div>
    </div>

    <el-dialog v-model="bianji" title="编辑" width="760px" center>
      <el-table :data="tableData" style="width: 760px; height: 500px">
        <el-table-column label="日期" prop="jlrq" width="120" align="center"/>
        <el-table-column label="类型" prop="lx" width="230" align="center"/>
        <el-table-column label="累计最大变化量" prop="ljbhl" width="170" align="center"/>
        <el-table-column label="点号" prop="dh" width="120" align="center"/>
        <!-- <el-table-column label="预警值" prop="yjz" /> -->
        <el-table-column label="操作" align="center" width="120" >
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="bianji = false">关闭</el-button>
          <!-- <el-button type="primary" @click="onSubmit">确定</el-button> -->
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="centerDialogVisible" title="新增" width="400" center>
      <el-form :model="formInline" class="demo-form" style="max-width: 320px">
        <div class="form-title">基础数据填写</div>
        <el-form-item label="日期">
          <div>
            <el-date-picker
              v-model="formInline.jlrq"
              type="date"
              placeholder="日期"
              :default-value="new Date()"
            />
          </div>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="formInline.lx"
            placeholder="下拉选择类型"
            clearable
          >
           <el-option label="基坑水平位移变化量" value="1" />
            <el-option label="基坑竖向位移变化量" value="2" />
            <el-option label="基坑深层水平位移变化量" value="3" />
            <el-option label="基坑锚索应力监测" value="4" />
            <el-option label="基坑地下水位变化量" value="5" />
            <el-option label="基坑周边建筑物竖向位移量" value="6" />
          </el-select>
        </el-form-item>
        <el-form-item label="最大累计变化量">
          <el-input
            v-model="formInline.zdljbhl"
            placeholder="最大累计变化量"
            clearable
          />
        </el-form-item>
        <el-form-item label="点号">
          <el-input v-model="formInline.dh" placeholder="点号" clearable />
        </el-form-item>
        <!-- <el-form-item label="预警值">
          <el-input v-model="formInline.yjz" placeholder="预警值" clearable />
        </el-form-item> -->
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <div style="display: flex">
      <div class="ditubj">
        <div
          id="viewDiv"
          style="
            position: relative;
            width: 1245px;
            height: 910px;
            margin: 0 auto;
            padding-top: 10px;
          "
        ></div>
      </div>

      <div>
        <div class="youshang">
          <div class="jksp">基坑水平及竖向位移</div>
          <div class="jkspsj" style="display: flex">
            <div class="jktb"></div>
            <div class="jktbbt">基坑水平位移累计最大变化量：</div>
            <div class="jktbsz">
              {{ a }}<span style="font-size: 14px">mm</span>
            </div>
            <div class="jktbdh">点号：</div>
            <div class="jktbdhz">{{ a1 }}</div>
          </div>
          <div
            style="
              position: relative;
              top: 15px;
              left: 210px;
              width: 400px;
              height: 14px;
              color: #00ffff;
              font-size: 14px;
            "
          >
            预警值:30mm，变化速率3mm/d。监测数据正常未报警
          </div>
          <div class="jkspsj2" style="display: flex">
            <div class="jktb2"></div>
            <div class="jktbbt">基坑竖向位移累计最大变化量：</div>
            <div class="jktbsz">
              {{ b }}<span style="font-size: 14px">mm</span>
            </div>
            <div class="jktbdh">点号：</div>
            <div class="jktbdhz">{{ b1 }}</div>
          </div>
          <div
            style="
              position: relative;
              top: 30px;
              left: 210px;
              width: 400px;
              height: 14px;
              color: #00ffff;
              font-size: 14px;
            "
          >
            预警值:20mm，变化速率3mm/d。监测数据正常未报警
          </div>
          <div class="jksp2">基坑深层水位位移</div>
          <div class="jkspsjsw" style="display: flex">
            <div class="jkscswlogo"></div>
            <div class="jktbbt">基坑深层水平位移最大累计变化量：</div>
            <div class="jktbsz">
              {{ c }}<span style="font-size: 14px">mm</span>
            </div>
            <div class="jktbdh">点号：</div>
            <div class="jktbdhz">{{ c1 }}</div>
          </div>
          <div
            style="
              position: relative;
              top: 50px;
              left: 210px;
              width: 400px;
              height: 14px;
              color: #00ffff;
              font-size: 14px;
            "
          >
            预警值:50mm，变化速率3mm/d。监测数据正常未报警
          </div>
        </div>
        <div class="youxia">
          <div class="jkmsyljc">基坑锚索应力监测</div>
          <div class="jkmsyljcsj" style="display: flex">
            <div class="yxlogo1"></div>
            <div class="jktbbt">基坑锚索应力监测最大累计变化量：</div>
            <div class="jktbsz">
              {{ d }}<span style="font-size: 14px">mm</span>
            </div>
            <div class="jktbdh">点号：</div>
            <div class="jktbdhz">{{ d1 }}</div>
          </div>
          <div class="youxiayvjingz">
            预警值:设计承载能力最大值的70%。监测数据正常未报警
          </div>
          <div class="jkmsyljc1">基坑地下水位监测</div>
          <div class="jkmsyljcsj1" style="display: flex">
            <div class="yxlogo2"></div>
            <div class="jktbbt">基坑地下水位最大变化量：</div>
            <div class="jktbsz">
              {{ e }}<span style="font-size: 14px">mm</span>
            </div>
            <div class="jktbdh">点号：</div>
            <div class="jktbdhz">{{ e1 }}</div>
          </div>
          <div class="youxiayvjingz1">
            预警值:1000mm，变化速率500mm/d。监测数据正常未报警
          </div>
          <div class="jkmsyljc2">基坑周边建筑物竖向位移</div>
          <div class="jkmsyljcsj2" style="display: flex">
            <div class="yxlogo3"></div>
            <div class="jktbbtzuihou">基坑周边建筑物竖向位移累计变化量：</div>
            <div class="jktbsz">
              {{ f }}<span style="font-size: 14px">mm</span>
            </div>
            <div class="jktbdh">点号：</div>
            <div class="jktbdhz">{{ f1 }}</div>
          </div>
          <div class="youxiayvjingz2">
            预警值:35mm，变化速率3mm/d。监测数据正常未报警
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="xiugai" title="修改" width="400" center>
      <el-form :model="xiugaidata" class="demo-form" style="max-width: 320px">
        <div class="form-title">基础数据填写</div>
        <el-form-item label="日期">
          <div>
            <el-date-picker
              v-model="xiugaidata.jlrq"
              type="date"
              placeholder="日期"
              :default-value="new Date()"
              disabled
            />
          </div>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            disabled
            v-model="xiugaidata.lx"
            placeholder="下拉选择类型"
            clearable
          >
            <el-option label="基坑水平位移变化量" value="1" />
            <el-option label="基坑竖向位移变化量" value="2" />
            <el-option label="基坑深层水平位移变化量" value="3" />
            <el-option label="基坑锚索应力监测" value="4" />
            <el-option label="基坑地下水位变化量" value="5" />
            <el-option label="基坑周边建筑物竖向位移量" value="6" />
          </el-select>
        </el-form-item>
        <el-form-item label="最大累计变化量">
          <el-input
            v-model="xiugaidata.zdljbhl"
            placeholder="最大累计变化量"
            clearable
          />
        </el-form-item>
        <el-form-item label="点号">
          <el-input v-model="xiugaidata.dh" placeholder="点号" clearable />
        </el-form-item>
        <el-form-item label="预警值">
          <el-input v-model="xiugaidata.yjz" placeholder="预警值" clearable />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="xiugai = false">关闭</el-button>
          <el-button type="primary" @click="xiugaiqueding">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// import ref from 'vue';

import { onMounted, ref, onUnmounted } from "vue";
import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView.js";
import TileLayer from "@arcgis/core/layers/TileLayer.js";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer.js";
// import SceneView from "@arcgis/core/views/SceneView.js";
import BasemapToggle from "@arcgis/core/widgets/BasemapToggle.js";
import Basemap from "@arcgis/core/Basemap.js";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
import Home from "@arcgis/core/widgets/Home.js";
import Graphic from "@arcgis/core/Graphic.js";
import PictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol.js";
import Point from "@arcgis/core/geometry/Point.js";
import { h } from "vue";
import { ElNotification } from "element-plus";
// const url = ref("http://oam.onthway.org/");
const url = ref("http://192.168.1.51:8098/");
// const url = ref("http://175.178.60.196:8098/");
const url1 = ref("http://175.178.60.196:5000/");

const xiugai = ref(false);
const xiugaidata = ref({});
const handleEdit = (index, row) => {
  // 编辑表格数据
  console.log(index, row);
  xiugai.value = true;
  xiugaidata.value.jlrq = row.jlrq;
  xiugaidata.value.zdljbhl = row.zdljbhl;
  xiugaidata.value.dh = row.dh;
  xiugaidata.value.yjz = row.yjz;
  xiugaidata.value.lx = row.lx;
  xiugaidata.value.id = row.id;
};
const xiugaiqueding = async () => {
  console.log("xiugaidata.value", xiugaidata.value);
  if (xiugaidata.value.lx == "基坑水平位移变化量") {
    xiugaidata.value.lx = 1;
  } else if (xiugaidata.value.lx == "基坑竖向位移变化量") {
    xiugaidata.value.lx = 2;
  } else if (xiugaidata.value.lx == "基坑深层水平位移变化量") {
    xiugaidata.value.lx = 3;
  } else if (xiugaidata.value.lx == "基坑锚索应力监测") {
    xiugaidata.value.lx = 4;
  } else if (xiugaidata.value.lx == "基坑地下水位变化量") {
    xiugaidata.value.lx = 5;
  } else if (xiugaidata.value.lx == "基坑周边建筑物竖向位移量") {
    xiugaidata.value.lx = 6;
  }
  try {
    const response = await fetch(url.value + "jk/updateJkInfo", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(xiugaidata.value),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const res = await response.json();
    console.log("res", res); // 处理返回的数据
    if (res.result == 1) {
      xiugai.value = false;
      select();
      selectzuixin();
      ElNotification({
        title: "消息",
        message: h("i", { style: "color: teal" }, "修改成功"),
      });
    }
  } catch (error) {
    console.error("请求出错:", error);
  }
};
const tableData = ref([]);
const centerDialogVisible = ref(false); // 声明一个响应式变量centerDialogVisible，初始值为false

const formInline = ref({
  lx: "",
  zdljbhl: "",
  dh: "",
  yjc: "",
  lb: "1",
  jlrq: "",
});
const currentTime = ref("");
const updateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1; // 月份从0开始，需要加1
  const day = now.getDate();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  // 补零函数
  const padZero = (num) => num.toString().padStart(2, "0");

  currentTime.value = `${year}年${padZero(month)}月${padZero(day)}日 ${padZero(
    hours
  )}:${padZero(minutes)}:${padZero(seconds)}`;
};

const select = async () => {
  try {
    const response = await fetch(url.value + "jk/queryXgjkxmList", {
      method: "POST",
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const res = await response.json();
    console.log("selectres", res); // 处理返回的数据
    tableData.value = res.result;
    tableData.value.forEach((i) => {
      if (i.lx == 1) {
        i.lx = "基坑水平位移变化量";
      } else if (i.lx == 2) {
        i.lx = "基坑竖向位移变化量";
      } else if (i.lx == 3) {
        i.lx = "基坑深层水平位移变化量";
      } else if (i.lx == 4) {
        i.lx = "基坑锚索应力监测";
      } else if (i.lx == 5) {
        i.lx = "基坑地下水位竖向位移";
      } else if (i.lx == 6) {
        i.lx = "基坑周边建筑物竖向位移量";
      }
    });

    console.log("tableData", tableData.value);
  } catch (error) {
    console.error("请求出错:", error);
  }
};
const a = ref();
const b = ref();
const c = ref();
const d = ref();
const e = ref();
const f = ref();
const a1 = ref();
const b1 = ref();
const c1 = ref();
const d1 = ref();
const e1 = ref();
const f1 = ref();
const yjz1 = ref();
const yjz2 = ref();
const yjz3 = ref();
const yjz4 = ref();
const yjz5 = ref();
const yjz6 = ref();
const selectzuixin = async () => {
  try {
    const response = await fetch(url.value + "jk/queryjkjcxmList", {
      method: "POST",
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const res = await response.json();
    console.log("大屏展示数据", res); // 处理返回的数据
    res.result.forEach((i) => {
      if (i.lx == "1") {
        a.value = i.zdljbhl;
        a1.value = i.dh;
        yjz1.value = i.yjc;
      }
      if (i.lx == "2") {
        b.value = i.zdljbhl;
        b1.value = i.dh;
        yjz2.value = i.yjc;
      }
      if (i.lx == "3") {
        c.value = i.zdljbhl;
        c1.value = i.dh;
        yjz3.value = i.yjc;
      }
      if (i.lx == "4") {
        d.value = i.zdljbhl;
        d1.value = i.dh;
        yjz4.value = i.yjc;
      }
      if (i.lx == "5") {
        e.value = i.zdljbhl;
        e1.value = i.dh;
        yjz5.value = i.yjc;
      }
      if (i.lx == "6") {
        f.value = i.zdljbhl;
        f1.value = i.dh;
        yjz6.value = i.yjc;
      }
    });
  } catch (error) {
    console.error("请求出错:", error);
  }
};
const onSubmit = async () => {
  console.log("formInline", formInline.value);
  const date = new Date(formInline.value.jlrq);
  // 获取年份
  const year = date.getFullYear();
  // 获取月份，注意月份是从 0 开始的，所以要加 1
  const month = String(date.getMonth() + 1).padStart(2, "0");
  // 获取日期
  const day = String(date.getDate()).padStart(2, "0");
  // 返回格式化后的日期字符串
  formInline.value.jlrq = `${year}-${month}-${day}`;

  try {
    const response = await fetch(url.value + "jk/addJkInfo", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formInline.value),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const res = await response.json();
    console.log("res", res); // 处理返回的数据
    if (res.result == 1) {
      centerDialogVisible.value = false;
      ElNotification({
        title: "消息",
        message: h("i", { style: "color: teal" }, "添加成功"),
      });
    }else {
      ElNotification({
        title: "消息",
        message: h("i", { style: "color: red" }, "已有数据，请勿重复添加"),
      });
    }
  } catch (error) {
    console.error("请求出错:", error);
  }
};

const ditu = () => {
  var yxdt = new TileLayer({
    url: url1.value + "skgis/gsszyy/MapServer",
  });

  var mapBaseLayer = new WebTileLayer({
    urlTemplate:
      "http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=065a47b56191880a603e70a26e4119b1",
    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    copyright: "天地图影像图",
  });

  var anoBaseLayer = new WebTileLayer({
    urlTemplate:
      "http://{subDomain}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=065a47b56191880a603e70a26e4119b1",
    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    copyright: "天地图影像注记",
  });

  var imgBasemap = new Basemap({
    baseLayers: [mapBaseLayer, anoBaseLayer, yxdt],
    title: "影像图",
    id: "img_w",
    thumbnailUrl:
      "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/0/0/0",
  });

  var mapBaseLayer_vec = new WebTileLayer({
    urlTemplate:
      "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=065a47b56191880a603e70a26e4119b1",
    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    copyright: "天地图矢量图",
  });

  var anoBaseLayer_vec = new WebTileLayer({
    urlTemplate:
      "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=065a47b56191880a603e70a26e4119b1",
    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    copyright: "天地图矢量注记",
  });

  var vecBasemap = new Basemap({
    baseLayers: [mapBaseLayer_vec, anoBaseLayer_vec, yxdt],
    title: "矢量图",
    id: "cva_w",
    thumbnailUrl:
      "https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/410.png",
  });

  var map = new Map({
    basemap: imgBasemap,
    ground: "world-elevation",
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
  });
  // setInterval(() => {
  //   console.log("1111111111111111111", mapBaseLayer);
  //   console.log("2222", yxdt);
  // }, 1000);

  view.when(function () {
    var toggle = new BasemapToggle({
      titleVisible: true,
      view: view,
      nextBasemap: vecBasemap,
    });

    view.ui.add(toggle, "bottom-right");
    // 创建 Home 小部件
    const homeWidget = new Home({
      view: view,
      goToOverride: function (view) {
        // 自定义缩放位置
        view.goTo({
          target: [103.777, 36.074],
          zoom: 15,
        });
      },
    });

    // 将 Home 小部件添加到视图的左上角
    view.ui.add(homeWidget, "top-left");

    view.ui.remove("attribution");
    // view.goTo({
    //   target: [103.78, 36.0699],
    //   zoom: 15,
    // });
    // 目标坐标和缩放级别
    const target = [103.777, 36.074];
    const zoom = 18;

    // 定位到目标位置
    view
      .goTo({
        target: target,
        zoom: zoom,
      })
      .then(() => {
        const graphicsLayer = new GraphicsLayer();
        const graphic = new Graphic();
        const point = new Point({
          "x": 103.777,
          "y": 36.074, // 假设坐标为(103.78, 36.07)
          // spatialReference: 4546, // 假设坐标系为4546
        });
        const pointSymbol = new PictureMarkerSymbol({
          url: "", // 图标相对路径
          height: 42,
          width: 42,
          yoffset: 10, // 偏移量
        });
        graphic.geometry = point;
        graphic.symbol = pointSymbol;
        graphicsLayer.add(graphic);
        map.add(graphicsLayer);
      });
  });
};

// // 和风天气服务中申请到的key
// let key = "84136fa0a1b6420f9c39b96158fe1d20";
// let longitude = "103.78";
// let latitude = "36.07";
// // 获取天气图标icon、温度，longitude经度、latitude纬度
// let url = `https://kk7fby833h.re.qweatherapi.com/v7/weather/now?key=${key}&location=${longitude},${latitude}`;
// const huqutq = () => {
//   fetch(url)
//     .then((response) => response.json())
//     .then((data) => {
//       console.log("data", data);
//       // // 获取天气图标icon、温度
//       // let icon = data.now.icon;
//       // let temperature = data.now.temp;
//       // // 将天气图标icon、温度显示在页面上
//       // document.getElementById("weather-icon").src = `https://cdn.heweather.net/s6/weather/png/64/${icon}.png`;
//     });
// };

onMounted(() => {
  selectzuixin();
  select();

  ditu();
  updateTime();
  // 每分钟更新一次网络时间
  const timer = setInterval(updateTime, 1000); // 60000 毫秒 = 1 分钟
  const sixiaoshi = setInterval(selectzuixin, 600000); // 60000 毫秒 = 1 分钟

  onUnmounted(() => {
    clearInterval(timer, sixiaoshi);
  });
});
</script>
<style scoped>
.jkmsyljc {
  /* 基坑锚索应力监测 */
  position: relative;
  color: #ffffff;
  text-align: center;
  line-height: 49px;
  top: 20px;
  left: 20px;
  width: 238px;
  height: 49px;
  background-image: url(../assets/jikengshuiping.png);
}
.jkmsyljcsj {
  position: relative;
  color: #ffffff;
  /* text-align: center; */
  line-height: 65px;
  top: 25px;
  left: 20px;
  width: 560px;
  height: 65px;
  background-image: url(../assets/jkspsj.png);
}
.youxiayvjingz {
  position: relative;
  top: 30px;
  left: 210px;
  width: 400px;
  height: 14px;
  color: #00ffff;
  font-size: 14px;
}

.jkmsyljc1 {
  /* 基坑锚索应力监测 */
  position: relative;
  color: #ffffff;
  text-align: center;
  line-height: 49px;
  top: 40px;
  left: 20px;
  width: 238px;
  height: 49px;
  background-image: url(../assets/jikengshuiping.png);
}
.jkmsyljcsj1 {
  position: relative;
  color: #ffffff;
  /* text-align: center; */
  line-height: 65px;
  top: 45px;
  left: 20px;
  width: 560px;
  height: 65px;
  background-image: url(../assets/jkspsj.png);
}
.youxiayvjingz1 {
  position: relative;
  top: 50px;
  left: 210px;
  width: 400px;
  height: 14px;
  color: #00ffff;
  font-size: 14px;
}

.jkmsyljc2 {
  /* 基坑锚索应力监测 */
  position: relative;
  color: #ffffff;
  /* text-align: center; */
  text-align: right;
  line-height: 49px;
  top: 65px;
  left: 20px;
  width: 238px;
  height: 49px;
  background-image: url(../assets/jikengshuiping.png);
}
.jkmsyljcsj2 {
  position: relative;
  color: #ffffff;
  /* text-align: center; */
  line-height: 65px;
  top: 70px;
  left: 20px;
  width: 560px;
  height: 65px;
  background-image: url(../assets/jkspsj.png);
}
.youxiayvjingz2 {
  position: relative;
  top: 75px;
  left: 210px;
  width: 400px;
  height: 14px;
  color: #00ffff;
  font-size: 14px;
}

.yxlogo1 {
  width: 45px;
  height: 45px;
  background-image: url(../assets/sanjiantou.png);
  position: relative;
  top: 10px;
  left: 10px;
}
.yxlogo2 {
  width: 45px;
  height: 45px;
  background-image: url(../assets/youxia2.png);
  position: relative;
  top: 10px;
  left: 10px;
}
.yxlogo3 {
  width: 45px;
  height: 45px;
  background-image: url(../assets/youxia3.png);
  position: relative;
  top: 10px;
  left: 10px;
}

.jkscswlogo {
  width: 45px;
  height: 45px;
  background-image: url(../assets/jkscswwy.png);
  position: relative;
  top: 10px;
  left: 10px;
}

.jktbdhz {
  position: relative;
  left: 10px;
  color: #ffffff;
  font-size: 26px;
}
.jktbdh {
  position: relative;
  left: 10px;
  color: #98dcff;
  font-size: 16px;
}
.jktbsz {
  width: 125px;
  position: relative;
  left: 10px;
  color: #ffffff;
  font-size: 26px;
}
.jktbbt {
  position: relative;
  left: 15px;
  color: #98dcff;
  font-size: 16px;
  width: 275px;
}
.jktbbtzuihou {
  position: relative;
  left: 15px;
  color: #98dcff;
  font-size: 16px;
  width: 275px;
}
.jktb2 {
  width: 45px;
  height: 45px;
  background-image: url(../assets/hsjk.png);
  position: relative;
  top: 10px;
  left: 10px;
}
.jktb {
  width: 45px;
  height: 45px;
  background-image: url(../assets/jktb.png);
  position: relative;
  top: 10px;
  left: 10px;
}
.jkspsjsw {
  position: relative;
  color: #ffffff;
  /* text-align: center; */
  line-height: 65px;
  top: 50px;
  left: 20px;
  width: 560px;
  height: 65px;
  background-image: url(../assets/jkspsj.png);
}
.jkspsj2 {
  position: relative;
  color: #ffffff;
  /* text-align: center; */
  line-height: 65px;
  top: 25px;
  left: 20px;
  width: 560px;
  height: 65px;
  background-image: url(../assets/jkspsj.png);
}
.jkspsj {
  position: relative;
  color: #ffffff;
  /* text-align: center; */
  line-height: 65px;
  top: 10px;
  left: 20px;
  width: 560px;
  height: 65px;
  background-image: url(../assets/jkspsj.png);
}
.jksp2 {
  position: relative;
  color: #ffffff;
  text-align: center;
  line-height: 49px;
  top: 43px;
  left: 20px;
  width: 238px;
  height: 49px;
  background-image: url(../assets/jikengshuiping.png);
}
.jksp {
  position: relative;
  color: #ffffff;
  text-align: center;
  line-height: 49px;
  top: 10px;
  left: 20px;
  width: 238px;
  height: 49px;
  background-image: url(../assets/jikengshuiping.png);
}
.youshang {
  margin-left: 8px;
  width: 601px;
  height: 413px;
  background-image: url(../assets/youshang.png);
}
.youxia {
  margin-top: 6px;
  position: relative;
  left: 8px;
  width: 601px;
  height: 509px;
  background-image: url(../assets/youxia.png);
}
.bj {
  background-image: url(../assets/beijing.png);
}
.ditubj {
  width: 1257px;
  height: 928px;
  margin-left: 23px;
  background-image: url(../assets/ditubeijing.png);
}
.biaoti {
  color: #45ff02;
  position: relative;
  width: 1220px;
  height: 89px;
  margin: 0 auto;
  text-align: center;
  line-height: 89px;
  font-size: 26px;
  top: 15px;
  background-image: url(../assets/biaoti.png);
}
</style>
<style scoped>
:deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
  width: 320px;
}
.demo-form {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.form-title {
  color: #000;
  font-size: 18px;
  text-align: center;
  margin-bottom: 15px;
}

.el-form-item {
  display: block;
  margin-bottom: 15px;
}

/* .el-form-item__label {
  font-weight: bold;
} */

/* .el-input__inner,
.el-select .el-input__inner {
  border-radius: 4px;
  border: 1px solid #ccc;
} */

/* .el-input__inner:focus,
.el-select .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
} */
</style>
